<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>table模块快速使用</title>
    <link rel="stylesheet" href="/static/layui/css/modules/laydate/default/laydate.css" media="all">
    <link rel="stylesheet" href="/static/layui/css/modules/layer/default/layer.css" media="all">
    <link rel="stylesheet" href="/static/layui/css/modules/code.css" media="all">
</head>
<body>

<table id="demo" lay-filter="demo" class="layui-table" lay-data="{url:'/student/findAll', id:'demo'}" >
    <thead>
    <tr>
        <th lay-data="{field:'id', width:80, sort: true}">ID</th>
        <th lay-data="{field:'studentName', width:120, sort: true, edit: 'text'}">学生姓名</th>
        <th lay-data="{field:'pic', edit: 'text', minWidth: 150}">图片</th>
        <th lay-data="{field:'birthday', width:80, edit: 'text'}">生日</th>
        <th lay-data="{fixed: 'right', toolbar: '#barDemo', width:150}">操作</th>
    </tr>
    </thead>

</table>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script src="/static/layui/layui.all.js"></script>
<script src="/static/js/jquery-3.3.1.js"></script>
<script>
    layui.use('table', function(){
        var table = layui.table;

//        //第一个实例
//        table.render({
//            elem: '#demo'
//            ,height: '1000'
//            ,url: '/student/findAll' //数据接口
//            ,page: true //开启分页
//            ,cols: [[ //表头
//                {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
//                ,{field: 'studentName', title: '学生姓名', width:80}
//                ,{field: 'pic', title: '性别', width:80, sort: true}
//                ,{field: 'birthday', title: '城市', width:80},
//                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
//            ]]
//        });
        //监听行工具事件-->删除
        table.on('tool(demo)', function(obj){
            var data = obj.data;

            if(obj.event==='del'){
                console.log(obj)
                layer.confirm('真的删除行么', function(index){
                   //使用ajax请求后台 进行删除行操作
                    $.ajax({
                        url:'/student/delById',
                        type:'post',
                        contentType:'application/json',
                        data:JSON.stringify({id:data.id}),
                        success:function(res){
                            layer.alert(res.message),{
                                title:'删除信息'
                            }
                            if (res.code==0){
                                obj.del();
                                layer.close(index);
                            }else{

                            }
                        }
                    })
                });
            }
        });

        //监听单元格编辑
        table.on('edit(demo)', function(obj){
            var value = obj.value //得到修改后的值
                    ,data = obj.data //得到所在行所有键值
                    ,field = obj.field; //得到字段
          //  layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改为：'+ value);

            console.log(value+obj.data+obj.field);
            //提交修改请求
            $.ajax({
                url:'/student/updateById',
                type:'post',
                contentType:'application/json',
                data:JSON.stringify(obj.data),
                success:function(res){
                    layer.alert(res.message),{
                        title:'修改信息'
                    }
                }
            })
        });
    });
</script>
</body>
</html>